<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="description" content="">
  <meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
  <meta name="generator" content="Hugo 0.88.1">
  <title>巡游轨迹的个人博客</title>
  <link href="../dist/css/bootstrap.min.css" rel="stylesheet">
  <style>
  </style>
  <!-- Custom styles for this template -->
  <link href="../dist/css/navbar.css" rel="stylesheet">
  <link href="../dist/css/upload.css" rel="stylesheet">
  <link href="../dist/css/footers.css" rel="stylesheet">
  <script src="../dist/js/jquery.min.js"></script>
  <style>
    body {
      background: url("../images/bc.jpg");
      background-size: cover;
      background-attachment: fixed;
    }
  </style>
</head>

<body>
  <main>
    <div>
      <nav class="navbar navbar-expand-lg navbar-light bg-light rounded fixed-top" aria-label="Eleventh navbar example">
        <div class="container-fluid">
          <img src="../images/TouXiang.jpg" alt="" width="35" height="35" class="rounded-circle me-2">
          <a class="navbar-brand" href="start.html">巡游轨迹的个人博客</a>
          <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarsExample09"
            aria-controls="navbarsExample09" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
          </button>

          <div class="collapse navbar-collapse" id="navbarsExample09">
            <ul class="navbar-nav me-auto mb-2 mb-lg-0">
              <li class="nav-item">
                <a class="nav-link active" aria-current="page" href="download.html">旅行攻略</a>
              </li>
              <li class="nav-item">
                <a class="nav-link active" aria-current="page" href="personal.html">个人简介</a>
              </li>
              <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" href="#" id="dropdown09" data-bs-toggle="dropdown"
                  aria-expanded="false" style="color:rgba(0, 163, 228, 0.87) ;">更多</a>
                <ul class="dropdown-menu" aria-labelledby="dropdown09">
                  <li><a class="dropdown-item" href="message.html">留言</a></li>
                  <li><a class="dropdown-item" href="Updatelog.html" style="color:rgba(0, 163, 228, 0.87) ;">图片上传</a>
                  </li>
                </ul>
              </li>
            </ul>
            <form>
              <input id="textId" class="form-control" type="text" placeholder="请输入..." aria-label="Search">
            </form>
            <div class="text-end">
              &nbsp;&nbsp;<button id="btn" type="button" class="btn btn-warning">搜索</button>
              &nbsp;&nbsp;&nbsp;&nbsp;
            </div>
          </div>
        </div>
      </nav>
    </div>
  </main>

  <!--高度填充-->
  <div style="height: 50px;"></div>
  <!--------图片上传块-------->
  <div>
    <div id="app">
      <div class="upload">
        <input type="file" id="file" multiple @change="upload">
      </div>
      <ul class="view">
        <li v-for="(item,index) in list" :key="index">
          <img :src="item">
          <div class="delect" @click="delect(index)">×</div>
        </li>
      </ul>
    </div>
    <!--------信息填写块-------->
    <div style="width: 80%;margin: 0 auto;max-width: 700px;">
      <form>
        <p>标题：</p>
        <input id="title" class="form-control" type="text" placeholder="请输入..." aria-label="Search" maxlength="8"><br />
        <p>描述：</p>
        <input id="brief" class="form-control" type="text" placeholder="请输入..." aria-label="Search" maxlength="200"
          style="height:100px ;"><br />
        <p>身份验证码：</p>
        <input id="identity" class="form-control" type="password" placeholder="请输入..." aria-label="Search" maxlength="6"
          style="width: 40%;"><br />
      </form>
      <div class="text-end">
        <button id="btn1" type="button" class="btn btn-warning">上传到轮播图</button>&nbsp;&nbsp;&nbsp;&nbsp;
        <button id="btn2" type="button" class="btn btn-warning">上传到列表图</button>
      </div>
    </div>
  </div>


  <!--------页脚块-------->
  <!--高度填充-->
  <div style="height: 100px;"></div>
  <div class="b-example-divider" style="height: 30px;"></div>
  <!-------------------分割------------------->
  <div class="container" style="height: 30px;">
    <!-------------------页脚主要------------------->
    <div id="lxfs">
      <footer class="d-flex flex-wrap justify-content-between align-items-center py-3 my-4 border-top">
        <div class="col-md-4 d-flex align-items-center">
          <a href="personal.html" class="mb-3 me-2 mb-md-0 text-muted text-decoration-none lh-1">
            <img src="../images/jianjie.jpg" width="24" height="24">
          </a>
          <span class="text-muted">&copy; 2022 Company, Inc</span>
        </div>
        <!-------------------弹框样式1------------------->.
        <div background-color="grey">
          <div class="back" v-if="showModal" @click="showModal=false"></div>
          <div class="pop" v-if="showModal"
            style="background:url('../images/footer/wxt.jpg')  no-repeat;background-size: cover;">
          </div>
        </div>
        <!-------------------弹框样式2------------------->.
        <div background-color="grey1">
          <div class="back" v-if="showModalqq" @click="showModalqq=false"></div>
          <div class="pop" v-if="showModalqq"
            style="background:url('../images/footer/qqt.jpg')  no-repeat;background-size: cover;">
          </div>
        </div>
        <ul class="nav col-md-4 justify-content-end list-unstyled d-flex">
          <li class="ms-3"><a class="text-muted" href="javascript:void(0)" v-bind="showModal" @click="wx1(index)"><img
                src="../images/footer/weixin.png" width="24" height="24"></a></li>
          <li class="ms-3"><a class="text-muted" href="javascript:void(0)" v-bind="showModalqq" @click="qq1(index)"><img
                src="../images/footer/qq.png" width="24" height="24"></a>
          </li>
          <li class="ms-3"><a class="text-muted" href="#"><img src="../images/footer/top.png" width="24"
                height="24"></a></li>
        </ul>
      </footer>
    </div>
  </div>
  </div>

  <script src="../dist/js/bootstrap.bundle.min.js"></script>
  <script src="../dist/js/vue3.js"></script>
  <script>
    Vue.createApp({
      data() {
        return {
          list: ['../images/shili.png']
        }
      },
      methods: {
        upload(e) {
          //e.target指向事件执行时鼠标所点击区域的那个元素
          console.log(e.target.files)
          //------------------------------------------------------     
          for (let item of e.target.files) {
            if (!/image\/\w+/.test(item.type)) {
              alert("只能选择图片");
              return;
            }
            var _this = this;
            let reader = new FileReader();
            // readAsDataURL方法可以将上传的图片格式转为base64,然后在存入到图片路径,这样就可以上传任意位置的图片
            reader.readAsDataURL(item);
            reader.addEventListener('load', function () {
              _this.list.push(this.result)
            })
          }
          //------------------------------------------------------------
        },
        delect(index) {
          console.log(index);
          this.list.splice(index, 1);
        },
      }
    }).mount('#app')

    Vue.createApp({
      data() {
        return {
          showModal: false,
          showModalqq: false,
        }
      },
      methods: {
        //页脚qq弹框判断
        qq1(index) {
          this.showModalqq = true;
          this.showModal = false;
        },
        //页脚微信弹框判断
        wx1(index) {
          this.showModal = true;
          this.showModalqq = false;
        },
      }
    }).mount('#lxfs')
  </script>
  <script type="text/javascript">
    //右上角百度搜索
    var $eleBtn1 = $("#btn");
    $eleBtn1.click(function () {
      var value = document.getElementById("textId").value;
      console.log(value)
      var $eleForm = $("<form method='get' </form>");
      window.open("https://www.baidu.com/s?wd=" + value);
      $(document.body).append($eleForm);
      $eleForm.submit();
    })

    //轮播图上传
    var $eleBtn2 = $("#btn1");
    $eleBtn2.click(function () {
      var value1 = document.getElementById("identity").value;
      if (value1 == "123") {
        var value2 = document.getElementById("title").value;
        var value3 = document.getElementById("brief").value;
        console.log(value2 + value3)
      }
    })

    //列表图上传
    var $eleBtn3 = $("#btn2");
    $eleBtn3.click(function () {
      var value1 = document.getElementById("identity").value;
      if (value1 == "123") {
        var value2 = document.getElementById("title").value;
        var value3 = document.getElementById("brief").value;
        console.log(value2 + value3)
      }
    })

  </script>
</body>

</html>